<template>
	<view>
		<view class="title" :style="{'padding-top':statusBarHeight + 25 + 'px'}">
			<uni-icons :color="'rgba(81, 81, 81)'" class="back" type="back" size="20"></uni-icons>
			<text class="title_text">服务通知</text>
			<uni-icons :color="'rgba(81, 81, 81)'" class="search" type="search" size="20"></uni-icons>
			<uni-icons :color="'rgba(81, 81, 81)'" class="hanber" type="bars" size="20"></uni-icons>
		</view>

		<scroll-view id="scrollview" style="position: relative;z-index: 1;padding-bottom: 30rpx;" scroll-y="true"
			:style="{'height':`calc(100% - ${statusBarHeight + 80}px)`,'margin-top':`${statusBarHeight + 15}px`}">
			<view class="" id="meScroll">
				
					<view class="" v-for="(v,i) in dataList" :key="i" @click="goTo">
						<view class="time">
							周四 16:20
						</view>
						<view class="home_card">
							<view class="home_card_title">
								<image src="../../../static/image/sg1.png" mode=""></image>
								<text>海底捞</text>
							</view>
				
							<view class="ywbl_message">
								积分到期提醒
							</view>
				
				
							<view class="home_card_content">
								<text class="name">积分总额</text>
								<text class="content">273</text>
							</view>
							<view class="home_card_content">
								<text class="name">即将到期积分</text>
								<text class="content">273</text>
							</view>
							<view class="home_card_content">
								<text class="name">到期时间</text>
								<text class="content">2023-06-30</text>
							</view>
							
							<view class="home_card_content">
								<text class="name">温馨提示</text>
								<text class="content">竟有捞币没花掉，快去会员商城兑换吧>></text>
							</view>
							
							
							<view class="line"></view>
							
							<view class="goto">
								进入小程序查看
								<uni-icons class="icon" type="forward" size="20" :color="'rgb(244, 244, 244)'"></uni-icons>
							</view>
						</view>
					</view>
				
				
				
				<view class="" v-for="(v,i) in dataList" :key="i" @click="goTo">
					<view class="time">
						周五 16:36
					</view>
					<view class="home_card">
						<view class="home_card_title">
							<image src="../../../static/image/sg1.png" mode=""></image>
							<text>苏阁鲜果茶点餐</text>
						</view>

						<view class="ywbl_message">
							订单支付成功通知
						</view>


						<view class="home_card_content">
							<text class="name">订单号</text>
							<text class="content">D16168690457779023772</text>
						</view>
						<view class="home_card_content">
							<text class="name">订单金额</text>
							<text class="content">17.6</text>
						</view>
						<view class="home_card_content">
							<text class="name">支付时间</text>
							<text class="content">2023-06-16 16:36:24</text>
						</view>
						
						<view class="home_card_content">
							<text class="name">下单门店</text>
							<text class="content">武汉市光谷世界城悦心汇店</text>
						</view>
						
						<view class="home_card_content">
							<text class="name">温馨提示</text>
							<text class="content">订单已支付完成，请关注门店信息</text>
						</view>
						
						<view class="line"></view>
						
						<view class="goto">
							进入小程序查看
							<uni-icons class="icon" type="forward" size="20" :color="'rgb(244, 244, 244)'"></uni-icons>
						</view>
					</view>
				</view>






				<view class="" v-for="(v,i) in dataList" :key="i" @click="goTo">
					<view class="time">
						{{time}}
					</view>
					<view class="home_card">
						<view class="home_card_title">
							<image src="../../../static/image/logo.png" mode=""></image>
							<text>武汉住保房管办事服务</text>
						</view>

						<view class="ywbl_message">
							业务办理进度通知
						</view>


						<view class="home_card_content">
							<text class="name">业务名称</text>
							<text class="content">{{v.name}}</text>
						</view>

						<view class="home_card_content">
							<text class="name">业务编号</text>
							<text class="content">{{v.num}}</text>
						</view>

						<view class="home_card_content">
							<text class="name">处理时间</text>
							<text class="content">{{v.time}}</text>
						</view>
						<view class="home_card_content">
							<text class="name">处理结果</text>
							<text class="content">查询成功</text>
						</view>
						<view class="home_card_content">
							<text class="name">备注</text>
							<text class="content">点击查看详情</text>
						</view>
						<view class="line"></view>
						<view class="goto">
							进入小程序查看
							<uni-icons class="icon" type="forward" size="20" :color="'rgb(244, 244, 244)'"></uni-icons>
						</view>
					</view>
				</view>

			</view>
		</scroll-view>


	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				ScrollTop: 0,
				time: "",
				statusBarHeight: 0,
				safeAreaInsets: 0,
				dataList: [
					// {
					// 	name: "个人房产信息查询",
					// 	num: "20210420479382",
					// 	time: "2021-04-20",
					// 	success: "查询成功",
					// },
					// {
					// 	name: "个人房产信息查询",
					// 	num: "20220618143826",
					// 	time: "2022-06-18",
					// 	success: "查询成功",
					// },
					// {
					// 	name: "个人房产信息查询",
					// 	num: "20220706965653",
					// 	time: "2022-07-06",
					// 	success: "查询成功",
					// },
					{
						name: "个人房产信息查询",
						num: "20230618961257",
						time: "2023-06-18",
						success: "查询成功",
					}
				]
			}
		},
		methods: {
			...mapGetters(['getstatusBarHeight', 'getSaInsetBottom']),
			getNowTime() {
				let time = new Date();
				const hours = time.getHours();
				const minutes = time.getMinutes();

				let strhours = hours >= 10 ? hours : "0" + hours;
				let strminutes = minutes >= 10 ? minutes : "0" + minutes;
				this.time = strhours + ":" + strminutes;
			},
			goTo() {
				uni.navigateTo({
					url: "/pages/home/index"
				})
			}
		},

		mounted() {
			this.statusBarHeight = this.getstatusBarHeight();
			this.safeAreaInsets = this.getSaInsetBottom();
			this.getNowTime();
			this.$nextTick(() => {
				uni.pageScrollTo({
					scrollTop: 2000,
					selector: "#scrollview",
					duration: 0
				})
			})
			// this.$nextTick(()=>{
			// 	setTimeout(()=>)
			// 	this.ScrollTop = 1000;
			// })
		}
	}
</script>

<style scoped>
	.title {
		width: 100%;
		/* height: 40rpx; */
		background-color: rgb(237, 237, 237);
		position: fixed;
		top: 0;
		left: 0;
		text-align: center;
		z-index: 2;
		box-sizing: border-box;
	}

	.title .back {
		display: block;
		position: absolute;
		left: 20rpx;
		top: 70%;
		transform: translateY(-50%);
	}

	.title .search {
		display: block;
		position: absolute;
		right: 120rpx;
		top: 70%;
		transform: translateY(-50%);
	}

	.title .hanber {
		display: block;
		position: absolute;
		right: 20rpx;
		top: 70%;
		transform: translateY(-50%);
	}

	.title .title_text {
		font-size: 32rpx;
		position: absolute;
		top: 70%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.time {
		margin: 14px;
		text-align: center;
		font-size: 30rpx;
		color: rgb(143, 143, 143);
	}

	.history_time {
		background-color: rgba(255, 255, 255, .6);
		padding: 10rpx 14rpx;
	}

	.home_card {
		width: 720rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 10px;
		/* padding: 16rpx 14rpx; */
		box-sizing: border-box;
		padding-bottom: 10px;
	}

	.home_card .home_card_title {
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		border-bottom: 1px solid rgb(246, 246, 246);

	}

	.home_card .home_card_title image {
		width: 60rpx;
		height: 60rpx;
	}

	.home_card .home_card_title text {
		display: inline-block;
		width: 550rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-left: 20rpx;
		font-size: 35rpx;
		font-weight: bold;
		transform: translateY(-10rpx);
	}

	.ywbl_message {
		margin: 16rpx 0 12rpx;
		padding-left: 34rpx;
		font-size: 22rpx;
		color: rgb(8, 8, 8);
		font-size: 35rpx;
	}

	.home_card_content {
		margin-top: 20rpx;
		padding-left: 34rpx;
	}

	.home_card_content::after {
		content: "";
		display: block;
		clear: both;
		visibility: hidden;
	}

	.home_card_content .name {
		display: block;
		width: 140rpx;
		float: left;
		font-size: 30rpx;
		margin-right: 30rpx;
		color: rgb(137, 137, 137);

	}

	.home_card_content .content {
		display: block;
		float: left;
		color: rgb(6, 6, 6);
	}

	.line {
		height: 1px;
		border-bottom: 1px solid rgb(246, 246, 246);
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.goto {
		height: 30rpx;
		line-height: 30rpx;
		font-size: 30rpx;
		color: rgb(8, 8, 8);
		padding-left: 34rpx;
		position: relative;
	}

	.goto .icon {
		position: absolute;
		top: 50%;
		right: 30rpx;
		transform: translateY(-50%);
	}
</style>